<template>
    <div class="whole">
        <!-- <div class="dia" style="width: 100%;background-color: #fff;">
            <van-search v-model="agentName" placeholder="请输入代理商名称或者手机号" shape="round" :show-action="showAction"
                class="search" @clear="onSearch">
            </van-search>
            <div class="increased" @click="additional(1)" v-if="agentName==''">
                新增
            </div>
            <div class="increased" @click="onSearch" v-else>
                搜索
            </div>
        </div> -->
        <div class="wrapperCenter">
            <div class="content">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                    <empty v-if="!list.length"></empty>
                    <div class="dis" v-for="(item,index) in list" :key="index">
                        <div class="main" :class="index!=0?'main_top':''">
                            <div class="main_d">
                                <div class="dia">
                                    <div class="">
                                        终端编号:
                                    </div>
                                    <div class="">
                                        {{item.terminalSn}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        返现阶段编号:
                                    </div>
                                    <div class="">
                                        {{item.stageNo}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        当前累计刷卡金额(元):
                                    </div>
                                    <div class="">
                                        {{item.amountTotal}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        是否达标:
                                    </div>
                                    <div class="" v-if="item.isReach==0">
                                        否
                                    </div>
                                    <div class="" v-else>
                                        是
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        是否已返现:
                                    </div>
                                    <div class="" v-if="item.isCashbacked==0">
                                        否
                                    </div>
                                    <div class="" v-else>
                                        是
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        是否已超期:
                                    </div>
                                   <div class="" v-if="item.isExpired==0">
                                       否
                                   </div>
                                   <div class="" v-else>
                                       是
                                   </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        达标时间:
                                    </div>
                                    <div class="">
                                        {{item.reachTime}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        返现时间:
                                    </div>
                                    <div class="">
                                        {{item.cashbackTime}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        实际返现金额(元):
                                    </div>
                                    <div class="">
                                        {{item.cashbackAmount}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        创建时间:
                                    </div>
                                    <div class="">
                                        {{item.createTime}}
                                    </div>
                                </div>
                                <div class="dia main_top">
                                    <div class="">
                                        返现流水号/订单号:
                                    </div>
                                    <div class="">
                                        {{item.cashbackOrderNo}}
                                    </div>
                                </div>
                                <!-- <div class="dia"
                                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;"> -->
                                <!-- <div class="dia">
                                        <img src="@/assets/terminal/logo_img.png" alt="" />
                                        <div class="institution">
                                            {{item.agentName}}
                                        </div>
                                        <div class="condition" v-if="item.isDirect==0">
                                            {{item.agentPhoneNo}}
                                        </div>
                                        <div class="condition" v-else>
                                            {{item.agentPhoneNo.slice(0,4)}}***{{item.agentPhoneNo.slice(-4)}}
                                        </div>
                                    </div> -->
                                <!-- <div class="dia" v-if="item.isDirect==0"> -->
                                <!-- <div class="condition_a dia" @click="navUrl('/liberal',item)">
											<div class="">
												开通渠道
											</div>
											<div class="">
												<img src="@/assets/terminal/arrow_right.png" alt="" />
											</div>
										</div> -->
                                <!-- <div class="condition_a dia" @click="navUrl('/liberal',item)">
											<div class="">
												成本配置
											</div>
											<div class="">
												<img src="@/assets/terminal/arrow_right.png" alt="" />
											</div>
										</div> -->
                                <!-- </div> -->
                                <!-- <div class="condition_a dia" @click="tagConfig(item)">
                                        <div class="">
                                            标签配置
                                        </div>
                                        <div class="">
                                            <img src="@/assets/terminal/arrow_right.png" alt="" />
                                        </div>
                                    </div>
                                    <van-popup v-model:show="tenantShow" round position="bottom">
                                        <van-picker title="标签配置" :columns="columns" @confirm="onConfirm"
                                            @cancel="onCancel" :columns-field-names="customFieldName" />
                                    </van-popup> -->
                                <!-- </div> -->

                            </div>

                            <!-- <div class="main_footer">
                                <div class="dia " style="justify-content: space-between;">
                                    <div class="">
                                        月交易：{{item.monthAmount}}
                                    </div>
                                    <div class="">
                                        总交易：{{item.totalAmount}}
                                    </div>
                                </div>
                                
                            </div>
                            <div class="line">

                            </div>
                            <div class="dis statistics" @click="navUrl('/checkStatistics',item)">
                                查看统计
                            </div> -->
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        selectAgentRewardRecord
    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast,
        showConfirmDialog
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRoute()
            const routers = useRouter()
            const state = reactive({
                pageStart: 1,
                pageSize: 10,
                loading: false,
                finished: false,
                list: [],
                showAction: false,
                agentName: "",
                // tenantShow: false,
                // columns: [],
                // agentNo: ""
            })
            // const customFieldName = {
            //     text: 'levelCode',
            //     value: 'level',
            // };

            // //确认标签配置
            // const onConfirm = (e) => {
            //     state.tenantShow = false
            //     console.log(e)
            //     console.log(state.columns[e.selectedValues[0]-1].levelCode)
            //     console.log(state.columns[e.selectedValues[0]-1].level)
            //     let parames = {
            //         agentNo: state.agentNo,
            //         levelCode: state.columns[e.selectedValues[0]-1].levelCode,
            //         level: state.columns[e.selectedValues[0]-1].level,
            //     }
            //     setAgentTag(parames).then(res => {
            //         showToast('设置成功')
            //     })
            // }
            // //取消标签配置
            // const onCancel = () => {
            //     state.tenantShow = false
            // }
            // //标签配置
            // const tagConfig = (e) => {
            //     state.tenantShow = true
            //     state.agentNo = e.agentNo
            //     console.log(e.agentNo)
            //     let parames = {
            //         agentNo: e.agentNo
            //     }
            //     selectAgentTag(parames).then(res => {
            //         state.columns = res.data
            //     })
            // }
            // // 搜索
            // const onSearch = () => {
            //     state.pageStart = 1
            //     state.list = []
            //     getList()
            // }
            // //新增代理商
            // const additional = () => {

            //     // routers.push({
            //     // 	path: "/share",
            //     // 	query:{
            //     // 		invitation:1
            //     // 	}
            //     // })
            //     routers.push({
            //         path: '/additional',
            //         query: {
            //             // configId: item.configId,
            //             invitation: 1
            //         }
            //     })
            // }
            const navUrl = (e, item) => {
                // console.log(store.state.user.agentNo,item.agentNo)
                // return
                routers.push({
                    path: e,
                    query: {
                        serviceNo: item.agentNo,
                        parentNo: store.state.user.agentNo
                    }
                })
            }

            //
            // const search = () => {
            // 	if (state.agentName == '') {
            // 		state.pageStart = 1
            // 		state.loading=true
            // 		state.finished=true
            // 		getList()
            // 	}
            // }
            //获取数据
            const getList = () => {
                let parames = {
                    pageStart: state.pageStart,
                    pageSize: state.pageSize
                }
                selectAgentRewardRecord(
                    parames
                ).then(res => {
                    if (res.data.records.length != 0) {
                        if (res.data.records.length < 10) {
                            state.finished = true
                            state.loading = false
                        } else {
                            state.pageStart++
                            state.finished = false
                            state.loading = false
                        }
                        state.list = state.list.concat(res.data.records)
                    } else {
                        state.finished = true
                        state.loading = false
                    }

                })
            }
            return {
                ...toRefs(state),
                getList,
                // onSearch,
                // additional,
                navUrl,
                // tagConfig,
                // onCancel,
                // onConfirm,
                // customFieldName,
            }
        }
    })
</script>
<style scoped lang="scss">
    .whole {
        height: 100vh;
        background-color: #FFF9F9;
        overflow-y: auto;

        .search {
            width: 328px;
            // position: fixed;
            // top: 0;
        }

        .increased {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FF5A3D;
        }

        .wrapperCenter {
            height: 100vh;
            overflow: scroll;

            .content {

                // padding: 0 10px;
                // padding-bottom:50px;
                // box-sizing: border-box;
                .main {
                    width: 339px;
                    // height: 46px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                    border-radius: 6px;
                    padding: 14px 14px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 14px;
                    color: #333333;
                    margin-top: 12px;

                    .main_top {
                        margin-top: 12px;
                    }

                    img {
                        width: 23px;
                        height: 23px;
                        border-radius: 6px;
                    }

                    .main_d {
                        // width: 280px;
                        // display: flex;
                        // justify-content: space-between;

                    }

                    .line {
                        width: 100%;
                        border-bottom: 1px solid #f3f3f3;
                        margin-top: 12px;
                    }

                    .statistics {
                        padding-top: 12px;
                        box-sizing: border-box;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FF2828;
                    }

                    .main_footer {
                        margin-top: 12px;
                        background: #FFF9F9;
                        width: 100%;
                        padding: 7px 25px;
                        box-sizing: border-box;

                        .main_tenant {
                            margin-top: 14px;
                        }
                    }

                    .institution {
                        width: 40px;
                        margin-left: 12px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .condition_a {
                        color: #74A2FF;
                        border-radius: 14px;

                        img {
                            width: 14px;
                            height: 14px;
                            margin-left: 1px;
                        }
                    }

                    .condition {
                        // margin-top: 4px;
                        margin-left: 0px;
                    }
                }
            }
        }

    }

    ::v-deep .van-search__content {
        background-color: #FFECEC !important;
    }
</style>